<template>
	<ul class="lhr-list-tree" :style="depthToFontSize(depth,rootFontSize)">
		<li v-for="(item,index) in treeData" class="tree-item">
			<router-link :to="item.nodePath||'/'" :class="{'active-node':item.active}">
				<span @click="onNodeClick(item)">{{item.nodeText}}{{testr}}</span>
			</router-link>
			<lhr-list-tree :get-nodetext="getNodetext"
			:tree-data.sync="item.childData" :depth="depth+1" :root-font-size="rootFontSize"
			class="child-node" :style="depthToFontSize(depth+1,rootFontSize)"
			:class="{'open-child':isChildOpen(item)}"></lhr-list-tree>
		</li>
	</ul>
</template>

<script>
	export default{
		data () {
			return {
				test: 'qweqw',
				activedNodes: []//存放展开的节点，以便点击某个节点时关闭同级其他节点
			}
		},
		props: {
			treeData: Array,
			depth: {
				type: Number,
				default: 0
			},
			rootFontSize: {
				type: Number,
				default: 16
			},
			getNodetext: {
				type: Function,
				default: function(){
					return '';
				}
			}
		},
		methods: {
		    depthToFontSize: function (depth,rootFontSize) {
				var fontSize = rootFontSize - depth;
				fontSize = fontSize < 10 ? 10 : fontSize;
				return 'font-size: '+ fontSize +'px;'
		    },
			onNodeClick: function(nodeItem){
				this.openNode(nodeItem);
				this.appendNodeByInput(nodeItem);
			},
			isChildOpen: function(nodeItem){
				var childOpen = false;
				if(nodeItem.active == true){
					childOpen = true;
				}
				if(!nodeItem.childData){
					nodeItem.isLeaf = true;
				}
				return childOpen;
			},
			openNode: function(nodeItem){
				for(var i in this.activedNodes){
					this.activedNodes[i].active = false;
				}
				this.activedNodes = [];//清空数组
				nodeItem.active = true;
				this.activedNodes.push(nodeItem);
			},
			appendNode: function(nodeItem){
				var appendChild = [
					{
						nodeText: 'Vue实例',
						active: false
					},
					{
						nodeText: '模板语法',
						active: false
					}
					];
					nodeItem.childData = (nodeItem.childData?nodeItem.childData:[]).concat(appendChild);
					nodeItem.active = true;
					this.openNode(nodeItem);
			},
			appendNodeByInput: function(nodeItem){
				if(nodeItem.isLeaf){
					var nodeText = this.getNodetext();
					if(!nodeText){
						alert('请在右边输入节点文字!');
						return;
					}
					var appendChild = [
						{
							nodeText: nodeText + '1',
							active: false,
							isLeaf: true
						},
						{
							nodeText: nodeText + '2',
							active: false,
							isLeaf: true
						},
						{
							nodeText: nodeText + '3',
							active: false,
							isLeaf: true
						}
						];
					
					this.$set(nodeItem,'childData',((nodeItem.childData)?nodeItem.childData:[]).concat(appendChild));
					//nodeItem.childData = ((nodeItem.childData)?nodeItem.childData:[]).concat(appendChild);
					//nodeItem.active = true;
					//this.openNode(nodeItem);
					nodeItem.isLeaf = false;
				}
			}
		},
		computed: {
			testr: function(){
				console.log('1',this.$router);
				return 1;
			}
		}
	}
</script>

<style lang="less">
ul.lhr-list-tree,.lhr-list-tree ul{
	list-style: none;
	font-weight: bold;
	font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
	ul.child-node{
		padding-left: 2em;
		display: none;
	}
	ul.open-child{
		display: block;
	}
	a{
		padding: 3px;
		text-decoration: none;
		&,&:link,&:active,&:visited{
			color: #34495e;
		}
		&:hover{
			color: #42b983;
		}
		&.active-node{
			color: #42b983;
		}
	}
	& .child-node{
		font-weight: normal;
	}
	.empty-node{
		display: none;
	}
}
</style>